<!DOCTYPE HTML>
<html>
    <head>
    <meta charset=utf-8>
    <title>Vanity Tools by Enavu Web Development Network - jQuery Plugin Set</title>
    
    <script src="modernizr-1.5.min.js"></script><!-- this is the javascript allowing html5 to run in older browsers -->
    
    <link rel="stylesheet" type="text/css" href="reset.css" media="screen" title="html5doctor.com Reset Stylesheet" />

    <!-- general stylesheet contains some default styles, you do not need this, but it helps you keep a uniform style -->
    <link rel="stylesheet" type="text/css" href="general.css" media="screen" />
    
    <!-- grid's will help you keep your website appealing to your users, view 52framework.com website for documentation -->
    <link rel="stylesheet" type="text/css" href="grid.css" media="screen" />
    
    
    <!-- the following style is for demonstartion purposes only and is not needed for anything but inspiration -->
    <style>
		body {font-family:Segoe UI, "Helvetica Neue", Arial, sans-serif;}
		header {border-bottom:3px solid #CCC; margin-bottom:30px;}
		header .logo {font-family:Georgia, "Times New Roman", Times, serif; font-size:42px; color:#333;}
		
		nav ul {float:right; margin-top:15px;}
		nav li {float:left; margin-left:10px;}
		nav li a {display:block; padding:3px 20px; font-size:1.3em; text-decoration:none; border-top:2px solid #eee;}
		nav li.active a, nav li a:hover {background-color:#eee; text-decoration:none; color:#000;}
		
		.plugins article {float:left; width:30%; margin-right:1%; margin-bottom:10px; padding:1%; height:130px; border-top:4px solid #eee;}
		.plugins article h3 {border-bottom:1px solid #eee; font-weight:normal;}
		.plugins article:hover {background-color:#eee;}
		.plugins article .actions {text-align:center;}
		.plugins article .actions a { text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.2em; float:left; margin-right:15px; border-left:2px solid #eee; padding:0px 5px;}
		.plugins article:hover a {color:#fff; border-left-color:#000; background-color:#000;}
		
		footer {text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:10px; color:#666; border-top:2px solid #ccc; margin-top:20px; padding-top:10px;}
	</style>
    </head>

<body>
<div class="row">
	<header>
    	
        <div class="logo col_7 col">Vanity</div><!-- logo col_7 -->
        
      <nav class="col_9 col">
        	<ul>
            	<li class="active"><a href="#navigation">home</a></li>
            	<li><a href="#navigation">blog</a></li>
                <li><a href="#navigation">docs</a></li>
            	<li><a href="http://www.enavu.com">demos</a></li>
            </ul>
        </nav><!-- nav col_9 -->
      <div class="clear"></div><!-- clear -->
    </header>
</div><!-- row -->

<!-- this section shows you most of the styled elements from the general stylesheet -->
<section class="row" id="styled">
    <div class="col col_16 plugins">
    	<article>
        	<h3>jPaginate</h3>
            <p>Want to organize your list of elements in a nice paged manner? This plugin will help you display large bits of information into a simple pagination system, with cookie support!</p>
            <div class="actions"><a href="#">demo</a><a href="#">docs</a><div class="clear"></div></div>
        </article>
        <article>
        	<h3>jSlider</h3>
            <p>You've seen those awesome slideshow sliders in the middle of a website! Well with this plugin you can have an extremely sexy one on your website!</p>
            <div class="actions"><a href="#">demo</a><a href="#">docs</a><div class="clear"></div></div>
        </article>
        <article>
        	<h3>jHover</h3>
            <p>Love to see cool hover effects, hover over one have the rest dim? Well we have tried to cover every hover type of trick you may want... and then some!</p>
            <div class="actions"><a href="#">demo</a><a href="#">docs</a><div class="clear"></div></div>
        </article>
        <article>
        	<h3>jCarousel</h3>
            <p>They call them carousels because they kinda look like carousels... 3 slides that go left or right, or 5, or 10. This plugin will make pretty slideshow navigation!</p>
            <div class="actions"><a href="#">demo</a><a href="#">docs</a><div class="clear"></div></div>
        </article>
        <article>
        	<h3>jBar</h3>
            <p>Remember the good old Facebook bar, you can have one on your page. This plugin makes it super duper easy to have your own custom facebook style bars!</p>
            <div class="actions"><a href="#">demo</a><a href="#">docs</a><div class="clear"></div></div>
        </article>
        <article>
        	<h3>jTabs</h3>
            <p>Tabs have been around since the beginning of the internet... right? Well now they are easier than ever to be added to your site.</p>
            <div class="actions"><a href="#">demo</a><a href="#">docs</a><div class="clear"></div></div>
        </article>
        <article>
        	<h3>jTip</h3>
            <p>Okay this one has definitely been there since the beginning of the internet, but we went a step further. Adding a beautiful ToolTip graphic to any element has never ever been easier!</p>
            <div class="actions"><a href="#">demo</a><a href="#">docs</a><div class="clear"></div></div>
        </article>
        <article>
        	<h3>jPlaceHolder</h3>
            <p>Placeholder attribute is an HTML5 feature and people are worried about using it because of bakward compatibility, well worry no more, use today!</p>
            <div class="actions"><a href="#">demo</a><a href="#">docs</a><div class="clear"></div></div>
        </article>
    </div><!-- col_16 -->
</section><!-- row -->

<footer class="row">

	<div class="col_16 col">all rights reserved &copy; <a href="http://www.enavu.com">enavu network</a> | vanity the most vain toolset you will ever use</div>

</footer>
</body>
</html>
